<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>

		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />

		<style>
			/********** 新闻列表页面底部线条hover效果 **********/
			.h-1p {
				height: 1px;
			}

			.hover-lineToRight::after,
			.hover-lineToRight::before {
				height: 100%;
				top: 0;
				position: absolute;
				content: '';
				width: 100%;
			}

			.hover-lineToRight::after {
				background-color: var(--bs-danger);
				left: -100%;
			}

			.hover-lineToRight::before {
				background: var(--bs-gray-400);
				left: 0;
			}

			.hover-lineToRight-wrap:hover .hover-lineToRight::before {
				left: 100%;
				transition: left 0.3s;
			}

			.hover-lineToRight-wrap:hover .hover-lineToRight::after {
				left: 0;
				transition: left 0.3s 0.3s;
			}
		</style>
	</head>
	<body>
		<!-- ********** 常用于新闻底部线条-官网改版 ********** -->

		<!--********** 新闻资讯 **********-->
		<div class="container-fluid px-xxl-7r mb-sm-20 mb-16 px-4 pt-5">
			<div class="row gx-xxl-8r">
				<div class="col-sm-4 mb-8 mb-sm-0">
					<div>
						<h3 class="mb-8 hover-lineToRight-wrap overflow-hidden">
							<div class="d-flex justify-content-between pb-4">
								<span class="fs-4 fw-bold">企业新闻</span>
								<span><img src="//qn1.10soo.net/assets24/202405080932634.svg" alt="" /></span>
							</div>

							<div class="position-relative h-1p line-change hover-lineToRight"></div>
						</h3>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
